<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>设备序列号</span>
        <el-input v-model="tempData.bitNumber" class="userselect" type="text" placeholder="请输入设备序列号"/>
      </p>
      <p>
        <span>设备名称</span>
        <el-input v-model="tempData.brand" class="userselect" type="text" placeholder="请输入设备名称" />
      </p>
			<p>
        <span>设备型号</span>
        <el-input v-model="tempData.model" class="userselect" type="text" placeholder="请输入设备型号" />
      </p>
			<p>
        <span>性能参数</span>
        <el-input v-model="tempData.powers" class="userselect" type="textarea" placeholder="请输入性能参数" />
      </p>
      <p>
        <span>检修人</span>
        <el-input v-model="tempData.maintainPerson" class="userselect" type="text" placeholder="请输入检修人" />
      </p>
			<p>
        <span>保养类型</span>
        <el-input v-model="tempData.texture" type="text" class="userselect" placeholder="请输入保养类型" />
      </p>
			<p>
        <span>润滑方式</span>
        <el-input v-model="tempData.lubrication" type="text" class="userselect" placeholder="请输入润滑方式" />
      </p>
      <p>
        <span>数量</span>
        <el-input v-model="tempData.number" type="number" class="userselect" placeholder="请输入数量" />
      </p>
      <!-- <p>
        <span>价格</span>
        <input v-model="tempData.price" type="text" placeholder="请输入价格" />
      </p> -->
      <!-- <p>
        <span>图片</span>
        <el-upload
          class="avatar-uploader"
          action
          :http-request="designUpAvatar"
          :show-file-list="false"
        >
          <img v-if="tempData.imgurl" :src="tempData.imgurl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p> -->
    </div>
		<div class="fileup">
			<div class="uping">
				<p>
					<span>上传资料</span>
					<el-upload
						class="upload-demo"
						drag
						:show-file-list="false"
						:http-request="designUpFile"
						action=""
						:multiple='false'
						limit='1'
						>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
					<p style="margin: 0;">
						<strong v-if="tempData.fileId">{{tempData.fileId}}</strong>
						<strong v-if="tempData.fileId" @click="downLoad(tempData.fileId)">下载<i class="el-icon-download" /></strong>
					</p>
				</p>
				<!-- <i class="el-icon-close delete" @click="deleteFile(item)"></i> -->
			</div>
		</div>
		<div class="submits">
		  <div class="save" @click="save">保存</div>
		  <div class="nosave" @click="nosave">取消</div>
		</div>
  </div>
</template>

<script>
	import { addChildrenDepartment,updateChildrenDepartment } from '@/api/bumen'
	import { uploadFile } from '@/api/people'
	let fatherid = null
	export default {
		data(){
			return{
				tempData: {
					"brand": "",
					"createName": "",
					"departFacilityId": "",
					"imgurl": "",
					"model": "",
					"nuit": "",
					"number": 0,
					"price": 0,
					"states": ""
				},
				writeOradd: 0   //1修改还是0增加
			}
		},
		mounted() {
			if(this.$route.params.options){
				this.tempData = JSON.parse(this.$route.params.options)
				this.writeOradd = 1
			}else{
				this.writeOradd = 0
			}
			fatherid = this.$route.params.fatherId
			console.log(this.tempData)
		},
		methods:{
			save(){
				if(this.writeOradd == 0){
					this.tempData.departFacilityId = fatherid
					addChildrenDepartment(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
					})
				}else{
					updateChildrenDepartment(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
					})
				}
				this.$router.go(-1)
			},
			nosave(){
				this.$router.go(-1)
			},
			designUpFile(item) {
				console.log('新增文档')
				const loading = this.$loading({
          lock: true,
          text: '上传中请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        })
				console.log(item)
				var formData = new FormData()
				formData.append("file", item.file)
				// formData.append('content', this.fileNum[item.data].filename)
				uploadFile(formData).then(res => {
					console.log(res)
					this.tempData.fileId = res
					this.$forceUpdate()
					loading.close()
					// this.uploadOver = true
				})
			},
			// 上传头像
			designUpAvatar(item){
				console.log(this.fileNum)
				var formData = new FormData()
				formData.append("file", item.file)
				uploadFile(formData).then(res => {
				  console.log(res)
					this.$message({
					  showClose: true,
					  message: '添加成功',
					  type: "success"
					})
					this.imageUrl = res
					this.tempData.fileId = res
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.disable{
		pointer-events: none;
		background: #808080 !important;
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
	.avatar-uploader .el-upload {
	  border: 1px dashed #999 !important;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
		overflow: hidden;
	  width: 100%;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
	
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
		height: 100px;
		border: 1px dashed #ccc;
	  line-height: 100px;
	  text-align: center;
	}
	.avatar {
	  width: 100px;
	  height: 100px;
	  display: block;
	}
	.submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
	.fileup{
    position: relative;
    // padding: 20px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    justify-content: space-between;
    .uping{
			width: 48%;
			position: relative;
      display: flex;
      flex-wrap: wrap;
			flex-direction: column;
			&:hover .delete{
				display: block;
			}
      > p {
        width: 90%;
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #333;
        /deep/.el-input__inner {
          // width: inherit;
          background: none;
          height: 32px;
          // line-height: 32px;
          color: #333;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding: 0 25px;
        }
        /deep/.el-input__icon {
          line-height: 32px;
        }
        /deep/.el-upload-dragger {
          width: 100%;
          height: 100px;
        }
        /deep/.el-upload-dragger .el-icon-upload {
          font-size: 60px;
          color: #C0C4CC;
          margin: 0; 
          line-height: 1;
          width: 100%;
        }
        /deep/.el-upload {
          width: 100%;
        }
        .userselect {
          // max-width: 250px;
          flex: 1;
        }
      
        > span {
          display: block;
          width: 100px;
          text-align: right;
          padding-right: 15px;
        }
        > input {
          width: inherit;
          flex: 1;
          height: 32px;
          border-radius: 3px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding-left: 10px;
          color: #333;
        }
        >strong{
          display: inline-block;
          padding-left: 100px;
          font-weight: 100;
          font-size: 14px;
          &:last-child{
            cursor: pointer;
            color: #13ce66;
            font-weight: 600;
          }
        }
        >div{
          width: inherit;
          flex: 1;
        }
			}
			.delete{
				position: absolute;
				z-index: 99;
				top: 0px;
				right: 10px;
				cursor: pointer;
				transition: all .5s;
				display: none;
			}
    }
  }
</style>